import React, { useEffect } from 'react';
import { StyleSheet, ViewStyle, StyleProp } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
  withSequence,
  cancelAnimation,
  Easing,
} from 'react-native-reanimated';
import { MaterialIcons } from '@expo/vector-icons';
import { useTheme } from './theme/ThemeContext';

interface HelloWaveProps {
  size?: number;
  color?: string;
  style?: StyleProp<ViewStyle>;
  duration?: number;
  repeatCount?: number;
}

export function HelloWave({
  size = 24,
  color,
  style,
  duration = 500,
  repeatCount = 3,
}: HelloWaveProps) {
  const { theme } = useTheme();
  const rotation = useSharedValue(0);

  useEffect(() => {
    // 创建挥手动画序列
    rotation.value = withRepeat(
      withSequence(
        withTiming(-15, {
          duration: duration / 2,
          easing: Easing.inOut(Easing.ease),
        }),
        withTiming(30, {
          duration: duration,
          easing: Easing.inOut(Easing.ease),
        }),
        withTiming(0, {
          duration: duration / 2,
          easing: Easing.inOut(Easing.ease),
        })
      ),
      repeatCount,
      false // 不要永久重复
    );

    // 清理动画
    return () => {
      cancelAnimation(rotation);
    };
  }, [rotation, duration, repeatCount]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { rotate: `${rotation.value}deg` },
        { translateX: -size / 4 }, // 调整旋转中心点
      ],
    };
  });

  return (
    <Animated.View style={[styles.container, style, animatedStyle]}>
      <MaterialIcons
        name="waving-hand"
        size={size}
        color={color || theme.colors.primary}
      />
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  } as ViewStyle,
});
